{include file="/shopro/common/script" /}

<style>
    .user-detail .title {
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        color: var(--sa-subtitle);
        margin-bottom: 8px;
    }

    .user-detail .bottom {
        padding: 16px;
        background: var(--sa-table-header-bg);
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .user-detail .left {
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        font-weight: 500;
        color: var(--sa-subfont);
        margin-bottom: 8px;
    }

    .user-detail .right {
        line-height: 32px;
        font-size: 14px;
        font-weight: 400;
        color: var(--sa-subtitle);
    }

    .user-detail .info {
        padding: 16px 16px 0;
        background: var(--sa-background-assist);
        border-radius: 4px;
    }

    .user-detail .info .el-col {
        margin-bottom: 16px;
    }

    .user-detail .log .bottom {
        padding: 0;
        background: var(--sa-background-assist);
    }

    .user-detail .el-tabs__nav-wrap::after {
        height: 0;
    }

    .user-detail .third-oauth .provider-platform {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
    }

    .user-detail .third-oauth .provider-item {
        margin-bottom: 20px;
    }

    .user-detail .third-oauth .provider-item:last-of-type {
        margin-bottom: 0;
    }
</style>

<div id="detail" class="user-detail" v-cloak>
    <el-container class="panel-block">
        <el-main>
            <el-row :gutter="24">
                <el-col class="sa-col-24" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                    <!--<div class="title">基本信息</div>-->
                    <div class="bottom">
                        <div class="info">
                            <el-row :gutter="24">
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">用户昵称</div>
                                    <div class="right">
                                        <span>{{state.detail.user.nickname}}</span>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">姓名</div>
                                    <div class="right">
                                        <el-input  v-model="state.detail.name" />
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">身份证号码</div>
                                    <div class="right">
                                        <el-input  v-model="state.detail.ID_number" />
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">身份证正面</div>
                                    <div class="right">
                                        <sa-uploader v-model="state.detail.ID_front" type="size" @success="onSuccess"></sa-uploader>
                                        <!--<el-input  v-model="state.detail.ID_front" />-->
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">身份证反面</div>
                                    <div class="right">
                                        <sa-uploader v-model="state.detail.ID_opposite" type="size" @success="onSuccess"></sa-uploader>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">状态</div>
                                    <div class="right">
                                        <el-radio-group v-model="state.detail.status">
                                            <el-radio :label="0">待审核</el-radio>
                                            <el-radio :label="1">通过</el-radio>
                                            <el-radio :label="2">驳回</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="left">备注</div>
                                    <div class="right">
                                        <el-input  v-model="state.detail.remark" />
                                    </div>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                                    <div class="label"></div>
                                    <div class="right sa-flex sa-row-right">
                                        <el-button @click="getDetail">重置</el-button>
                                        {if $auth->check('shopro/user/real/edit')}
                                        <el-button type="primary" @click="onSave">保存</el-button>
                                        {/if}
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>